<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import qs from "qs";

const BASE_URL = 'http://localhost:8080';

const beforeAddRole = () => {
  dialogTitle.value = '新增角色';
  saveRoleForm.value = {
    name: '',
    description: '',
    moduleRoute:[]};
  dialogVisible.value = true;
};
const nameTitle = ref('roleManage')

const routerTitle = () => {
  router.push('/'+nameTitle.value)
}
const tableData = ref([])


const editRole = (id) => {
  dialogTitle.value = '编辑角色';
  dialogVisible.value = true;

  axios.get(BASE_URL+'/v1/role/select?id='+id).then((response) => {

    if (response.data.code == 2001) {
      console.log(response.data.data[0]);
      saveRoleForm.value = response.data.data[0];
    } else {
      ElMessage.error(response.data.message);
    }
  });
};

const deleteRole = (id) => {
  ElMessageBox.confirm('您确定要删除该角色吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.post(BASE_URL + '/v1/role/delete?id=' + id).then((response) => {
      if (response.data.code == 2001) {
        ElMessage.success('删除成功');
        loadRole();
      } else {
        ElMessage.error(response.data.message)
      }
    })
  }).catch(() => {

  })
}

const loadRole = () => {
  let data = qs.stringify(searchFormRole.value);
  axios.get(BASE_URL+'/v1/role/select?'+data).then((response) => {
    if (response.data.code == 2001) {
      tableData.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  })
}
const moduleTitle = ref([])
const loadModule = () => {
  axios.get(BASE_URL+'/v1/module/select').then((response) => {
    if (response.data.code == 2001) {
      console.log(response.data.data);
      moduleTitle.value = response.data.data;
    } else {
      ElMessage.error(response.data.message);
    }
  })
}
onMounted(() => {
  loadRole();
  loadModule();
});

const searchFormRole = ref({
  id: '',
  name: '',
  description: '',
})

const resetRole = () => {
  searchFormRole.value = {};
  loadRole()
}

const dialogVisible = ref(false);

const dialogTitle = ref('新增角色');

const handleClose = () => {
  ElMessageBox.confirm('您确定要关闭吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',

  }).then(() => {

    dialogVisible.value = false;

    saveRoleForm.value = {
      name: '',
      description: '',
      moduleRoute:[]};

  }).catch(() => {

  })
}
const saveRole = () => {
  let data = qs.stringify(saveRoleForm.value);
  axios.post(BASE_URL+'/v1/role/insert',data).then((response) => {
    if (response.data.code == 2001) {
      ElMessage.success('保存成功');
      dialogVisible.value = false;
      saveRoleForm.value = {
        name: '',
        description: '',
        moduleRoute:[]};
      loadRole();
    } else {
      ElMessage.error(response.data.message);

    }
  })
}

const saveRoleForm = ref({
  name: '',
  description: '',
  moduleRoute:[]
})
const checkAll = ref(false)
const isIndeterminate = ref(true)

const handleCheckAllChange = (val) => {
  saveRoleForm.value.moduleRoute = val ? moduleTitle.value : []
  isIndeterminate.value = false;

}
const handleCheckedCitiesChange = (value) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === moduleTitle.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < moduleTitle.value.length
}

</script>

<template>
  <el-card style="margin-top: 20px; color: #333333;" shadow="never">
    <el-radio-group @change="routerTitle" v-model="nameTitle"
                    style="margin-bottom: 10px; color: #6b778c; font-size: 32px; font-weight: 600;">
      <el-radio-button value="employeeManage">员工列表</el-radio-button>
      <el-radio-button value="roleManage">角色列表</el-radio-button>
    </el-radio-group>
    <el-button type="primary" style="float: right; margin-top: 10px;" @click="beforeAddRole">新建角色</el-button>
    <el-divider style="margin-bottom: 0"></el-divider>
    <!-- 搜索栏 -->
    <el-form :inline="true" style="margin-top: 20px;">
      <el-form-item label="角色名称" style="width: 220px;">
        <el-input placeholder="请输入角色名称" v-model="searchFormRole.name" @keydown.enter="loadRole"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetRole">重置</el-button>
        <el-button type="primary" @click="loadRole">搜索</el-button>
      </el-form-item>
    </el-form>
    <!-- 员工弹窗 -->
    <el-divider style="margin-bottom: 0; margin-top: 10px"></el-divider>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width: 700px; padding: 80px;"
               :before-close="handleClose">
      <el-form label-width="100px" label-position="top">
        <el-form-item label="角色名称">
          <el-input placeholder="请输入角色名称" v-model="saveRoleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input placeholder="请输入角色描述" v-model="saveRoleForm.description"></el-input>
        </el-form-item>
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange">全选
        </el-checkbox>
        <el-checkbox-group
            v-model="saveRoleForm.moduleRoute"
            @change="handleCheckedCitiesChange">
          <el-checkbox v-for="module in moduleTitle" :key="module" :label="module" :value="module">
            {{ module }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveRole">确定</el-button>
      </template>
    </el-dialog>
    <!-- 员工表格 -->
    <el-table :data="tableData" style="width: 100%; font-size: 14px;" stripe>
      <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
      <el-table-column prop="id" label="角色编号" width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="角色名称" width="180" align="center"></el-table-column>
      <el-table-column prop="description" label="角色描述" width="280" align="center"></el-table-column>

      <el-table-column prop="updateTime" label="创建时间" width="280" align="center"></el-table-column>
      <el-table-column prop="createTime" label="更新时间" width="280" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editRole(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteRole(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
  </el-card>
</template>
<style scoped>
</style>
